<template>
	<view class="content">
		<navbar title='订单详情' backgroundColor="#483C38" backColor="#fff">
		</navbar>
		<view class="content">
			
			<view class="xqone" v-if="info.status == 0">
				<view class="xqhead">
					<image class="icon_order_dd" src="@/pages_client/static/mine/icon_order_dd.png" mode="" />
					<text class="dainame">等待付款</text>
				</view>
				<view class="fuview">
					<view class="fuitem">
						需付款：￥
						<text class="funum">{{info.total_money}}</text>
					</view>
					<view class="fuitem" v-if="info.cha">
						剩余
						<u-count-down style="margin: 0 4rpx;" bg-color="#483C38" font-size="32" separator-color="#fff" color="#fff" :timestamp="info.cha" @end="endtime"></u-count-down>
						订单自动取消
					</view>
				</view>
				<view class="quzhi" @click.stop="getpay(info.id)">去支付</view>
			</view>
			<view class="xqone" v-else>
				<view class="xqhead">
					<image class="icon_order_dd" src="@/pages_client/static/mine/icon_order_dd.png" mode="" />
					<text class="dainame">{{ info.status_text }}</text>
				</view>
			</view>
			
			<!-- <view class="diview mheadtop">
				<u-steps style="width: 100%;" active-color="#483C38" mode="number" :list="numList" type="success" :current="1"></u-steps>
			</view> -->
			<view class="mheadtop"></view>
			<view class="diview" v-if="info.address_id&&info.address_id!=''">
				<image class="icon_order_dz" src="@/pages_client/static/mine/icon_order_dz.png" mode="" />
				<view class="diright">
					<view class="dihead">
						<text class="name">{{ info.address_data.consignee }}</text>
						<text class="name phone">{{info.address_data.mobile}}</text>
						<!-- <view class="xiu ml" @click="getphonetwo(info.address_data.mobile)">拨打电话</view> -->
					</view>
					<text class="dimiao">{{info.address_data.province_name+info.address_data.city_name+info.address_data.district_name+info.address_data.address_des}}</text>
				</view>
			</view>
			<view class="menlist">
				<view class="oitem">
					<view class="ohead">
						<image class="icon_sj" src="@/pages_client/static/img/icon_sj.png" mode="" />
						<text class="dianname txt">{{ info.shop_name }}</text>
						<text class="zt ml">{{info.status_text}}</text>
					</view>
					<view class="olist">
						<view class="onav" v-for="(item,index) in info.goods_list" :key="index">
							<image class="tu" :src="ossThree(item.goods_image)" />
							<view class="navright">
								<view class="navone">
									<text class="bt txt">{{ item.goods_name }}</text>
									<text class="jia ml">￥{{ item.goods_price }}</text>
								</view>
								<view class="navone">
									<text class="btmiao txt">{{item.goods_sku_name}}</text>
									<text class="btmiao ml">x{{ item.goods_nums }}</text>
								</view>
								<view class="navone">
									<view class="zheng">正品保障</view>
								</view>
								
							</view>
						</view>
					</view>
					<view class="tuanquan" v-if="info.hexiao_code">
						<view class="tquans">
							<text class="tquan">待使用券码<text class="tquannum">{{ info.hexiao_cha }}</text>张</text>
							<view class="chaquan" v-if="info.hexiao_cha!=0" @click="getyulan(info.hexiao_code_image)">查看券码</view>
						</view>
						<view class="tquans">
							<!-- <text class="tquanma">7701 9903 6052 26</text> -->
							<view class="daishi">{{ info.hexiao_status_text }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="dianpu" v-if="info.shop!=''">
				<view class="dianone" @click="shopdetail()">
					<image class="tuimg" :src="ossThree(info.shop.logo)" />
					<view class="shopright">
						<view class="sleft">
							<view class="lone">
								<text class="lname txt">{{info.shop.name}}</text>
								<image class="icon_rz" src="@/pages_client/static/img/icon_rz.png" />
							</view>
							<u-rate size="28" :count="count" v-model="info.shop.star" disabled></u-rate>
							<view class="tuan">
								<text class="tuang" v-for="(i,ind) in info.shop.cate_ids" :key="ind">{{i}}</text>
							</view>
						</view>
						<!-- <view class="sright">
							<view class="jindian">进店</view>
						</view> -->
					</view>
				</view>
				<view class="diantwo" v-if="info.shop.address" @click.stop="getdaohang">
					<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
					<text class="wentit txt">{{ info.shop.address }}</text>
					<image class="icon_xgs" src="@/pages_client/static/img/comm_icon_next.png" />
				</view>
			</view>
			<view class="shiyong" v-if="info.type == 2&&info.xuzhi">
				<text class="xuzhi">使用须知</text>
				<!-- <view class="xuitem">
					<text class="xuname">使用时间</text>
					<text class="xuright">{{info.time}}</text>
				</view> -->
				<view class="xuitem">
					<!-- <text class="xuname">适用规则</text> -->
					<text class="xuright">{{ info.xuzhi }}</text>
				</view>
			</view>
			<view class="dinview">
				<view class="dinitem">
					<text class="dinname">订单编号</text>
					<view class="dinnright">
						<text class="drnval">{{ info.order_sn }}</text>
						<view class="fu" @click="copy(info.order_sn)">复制</view>
					</view>
				</view>
				<view class="dinitem">
					<text class="dinname">下单时间</text>
					<view class="dinnright">
						<text class="drnval">{{ info.createtime }}</text>
					</view>
				</view>
				
				<view class="dinitem" v-if="info.type == 1">
					<text class="dinname">配送方式</text>
					<view class="dinnright">
						<text class="drnval">{{info.delivery_type}}</text>
					</view>
				</view>
				<view class="dinitem">
					<text class="dinname">支付方式</text>
					<view class="dinnright">
						<text class="drnval">{{info.pay_type}}</text>
					</view>
				</view>
				<view class="dinitem" v-if="info.type ==1">
					<text class="dinname">买家留言</text>
					<view class="dinnright">
						<text class="drnval">{{ info.user_remark||'--' }}</text>
					</view>
				</view>
				<view class="dinitem">
					<text class="dinname">商品合计</text>
					<view class="dinnright">
						<text class="drnval">￥{{info.goods_money}}</text>
					</view>
				</view>
				<view class="dinitem">
					<text class="dinname">快递运费</text>
					<view class="dinnright">
						<text class="drnval">￥{{info.delivery_fee}}</text>
					</view>
				</view>
				<view class="xufu">
					<text class="fuprice">总计：¥<text class="fupricenum">{{info.total_money}}</text></text>
				</view>
			</view>
		</view>

		<view class="botview" v-if="info.type==1&&info.status!=1">
			<view class="hename">
				<view class="btn" v-if="info.status == '0'"  @click.stop="getquxiao()">取消订单</view>
				<view class="btn fukuan" v-if="info.status=='0'" @click.stop="getpay(info.id)">去付款</view>
				<view class="btn queren"  v-if="info.status=='2'" @click.stop="getdelivery()">确认收货</view>
				<view class="btn queren"  v-if="info.status>='2'" @click.stop="getwuliu()">查看物流</view>
			</view>
		</view>
		<u-popup  v-model="cancelpop" mode="center" width="80%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closecancel">
			<view class="popone">
                <view class="phonenav">
                    <view class="cha" @click="closecancel">
                        <image class="icon_gbcha" src="@/pages_client/static/img/icon_gbicon.png" mode="" />
                    </view>
                    <text class="jiename">取消订单</text>
                    <view class="queli">
						<u-input v-model="des" type="text" placeholder='请输入取消原因' />
                    </view>
                    <view class="dianbtn" @click="temClick">
                        <text class="bm">确认</text>
                    </view>
                    <!-- <text class="kaolv"  @click="closeedit">取消</text> -->
                </view>
                
            </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货'
				},{
					name: '待收货'
				}, {
					name: '已完成'
				}],
				current: 0,
				value:1,
				timestamp: 86400,
				numList: [{
					name: '申请退款'
				}, {
					name: '处理中'
				}, {
					name: '已完成'
				}],
				id:'',
				info:{
					shop:{
						logo:''
					}
				},
				cancelpop:false,
				des:'',
				popid:'',
				latitude:'',
				longitude:'',
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			this.getdinwei()
		},
		onShow() {
		},
		methods: {
			getdinwei(){
			let that = this
				//#ifdef MP-WEIXIN
				
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						console.log(res)
						if(res.latitude){
							that.latitude = res.latitude
						}
						if(res.latitude){
							that.longitude = res.longitude
						}
						that.getDetail()
					},fail:(e)=>{
						console.log(e)
						that.getDetail()
					}
				})
				//#endif
				//#ifdef H5
				this.latitude = '34.74821'
				this.longitude = '113.61332'
				that.getDetail()
				//#endif
				
				
			},
			async getDetail(){
				let res = await this.$u.api.getDetail({
					order_id:this.id,//空是全部 0待付款 1待发货 2待收货 3已完成
					lat:this.latitude,
					lng:this.longitude
				});
				this.info = res
				if(this.info.cha == 0&&this.info.status!='-1'){
					this.endtime()
				}
			},
			closeteam(){
				this.teampopshow = false
			},
			change(index) {
				this.current = index;
			},
			getquxiao(){
				this.cancelpop = true
			},
			async temClick(){
				let res = await this.$u.api.ordercancel({
					order_id:this.info.id,
					des:this.des
				});
				this.$u.toast("取消成功");
				this.closecancel()
				this.getDetail()
			},
			async getdelivery(item){//确认收货
				let res = await this.$u.api.delivery({
					order_id:this.info.id
				});
				this.$u.toast("操作成功");
				this.closecancel()
				this.getDetail()
			},
			closecancel(){
				this.des = ''
				this.cancelpop = false
			},
			async endtime(){
				
				if(this.info.status == 0){
					console.log('取消订单')
					let res = await this.$u.api.ordercancel({
						order_id:this.info.id,
						des:this.des
					});
					this.getDetail()
				}
				
			},
			async getpay(id){
				let res = await this.$u.api.getOrderByGoods({
					order_id:id
				});
				let that = this
				uni.requestPayment({
                    appId: res.appid,
                    nonceStr: res.nonceStr,
                    package: res.package,
                    paySign: res.paySign,
                    signType: res.signType,
                    timeStamp: res.timeStamp,
                    success: (e) => {
                        console.log(e)
                        uni.showToast({
                            title: '支付成功',
                            icon: 'success',
                            duration: 2500,
                        })
						setTimeout(() => {
							that.getDetail()
						}, 1000);
                    },
                    fail: (e) => {
                        console.log(e)
                        this.$u.toast("支付失败");
						setTimeout(() => {
							that.getDetail()
						}, 1000);
                        // uni.switchTab({ url: '/pages/tabbar/my' })
                        // uni.showModal({
                        //     content: "支付失败,原因为: " + e.errMsg,
                        //     showCancel: false
                        // })
                    }
                })
			},
			getdaohang(){
				let that = this
				// console.log( Number(that.info.shop.lat))
				uni.openLocation({
					latitude: Number(that.info.shop.lat),
					longitude: Number(that.info.shop.lng),
					name: that.info.shop.address,
					address: that.info.shop.address,
					scale: 18,
					success(res) {
						console.log('打开地图成功');
					},
					fail(err) {
						console.error('打开地图失败', err);
					}
				});
			},
			getwuliu(){
				this.navrouter('/pages_client/mine/wuliu?id='+this.id)
			},
			getyulan(e){
				if(this.info.hexiao_cha == 0){
						this.$u.toast("暂无可用券码");
						return;
				}
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
			shopdetail(){
				//调整店铺主页
				this.navrouter('/pages_client/twoPage/MenZhuye?id='+this.info.shop.id+'&latitude='+this.latitude+'&longitude='+this.longitude)
			},
			getphonetwo(mobile){
                let that = this
                uni.makePhoneCall({
					phoneNumber: mobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
                        // 请求接口 报名成功
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
            },
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f9f9f9;
	}
	.content{
		background-color: #f9f9f9;
		padding-bottom: 130rpx;
		.xqone{
			background: #483C38;
			// height: 300rpx;
			padding: 30rpx 0 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			position: relative;
			.xqhead{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.icon_order_dd{
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
			.dainame{
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.fuview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 10rpx 0;
				.fuitem{
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					margin: 0 20rpx;
				}
				.funum{
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
		.quzhi{
			width: 212rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #483C38;
			margin-top: 20rpx;
		}
		.tuanone{
			background-color: #fff;
			padding: 15rpx 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			.tuhead{
				max-width: 80%;
				white-space: nowrap;
				.tuitem{
					padding: 8rpx 20rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					margin-right: 20rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					display: inline-block;
				}
				.tactive{
					background: #52443B;
					color: #fff;
				}
			}
			.icon_tx{
				margin-left: auto;
				width: 40rpx;
				height: 40rpx;
			}
		}	
	}
	
	.diview{
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 0 20rpx 0rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		.tuiview{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.tuis{
				width: 30rpx;
				height: 30rpx;
				margin-bottom: 20rpx;
			}
		}

		.icon_order_dz{
			width: 36rpx;
			margin-right: 20rpx;
			height: 36rpx;
			position: relative;
			top: 4rpx;
		}
		.diright{
			width: 90%;
			display: flex;
			flex-direction: column;
			.dihead{
				display: flex;
				flex-direction: row;
				align-items: center;
				.name{
					font-weight: bold;
					font-size: 28rpx;
					color: #1A1A1A;
				}
				.phone{
					display: inline-block;
					margin-left: 30rpx;
				}
				.xiu{
					width: 130rpx;
					height: 45rpx;
					border-radius: 20rpx;
					border: 1px solid #9A9A9A;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 20rpx;
					color: #222222;
				}
			}
			.dimiao{
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
				display: block;
				margin-top: 15rpx;
			}
		}
	}
	.mheadtop{
		position: relative;
		margin-top: -50rpx !important;
	}
	.nlist{
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		.nitem{
			padding: 20rpx 25rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.nione{
				display: flex;
				flex-direction: row;
				align-items: center;
				.tous{
					width: 81rpx;
					border-radius: 50%;
					height: 81rpx;
					margin-right: 15rpx;
				}
				.niright{
					width: 82%;
					display: flex;
					flex-direction: column;
					.rione{
						display: flex;
						flex-direction: row;
						align-items: center;
						.riname{
							max-width: 80%;
							display: inline-block;
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}
						.hyuan{
							width: 80rpx;
							height: 32rpx;
							background: linear-gradient(-90deg, #272727, #4D4D4D);
							border-radius: 6rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 500;
							font-size: 22rpx;
							color: #FFFFFF;
							margin-left: 10rpx;
						}
						.idname{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
						.hui{
							margin-left: 40rpx;
						}

					}
					.mttwo{
						margin-top: 15rpx;
					}
				}
				.comm_icon_next{
					margin-left: auto;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.zheview{
				border-top: 1rpx solid #eee;
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;
				padding-top: 20rpx;
				.zheitem{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.items{
						width: 50%;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 10rpx;
						.ileft{
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
						}
						.ival{
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
						}
					}
				}
				.shengbtn{
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					padding: 0 20rpx 20rpx 0;
					.sbtn{
						padding: 15rpx 25rpx;
						background: #52443B;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	.botview{
		position: fixed;
		height: 120rpx;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		z-index: 10;
		padding: 0 30rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.tjia{
			width: 100%;
			height: 90rpx;
			background: #52443B;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.menlist{
		padding:20rpx 22rpx;
		position: relative;
	}
	.oitem{
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		padding: 30rpx;
		.ohead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.icon_sj{
				width: 30rpx;
				height: 30rpx;
				margin-right: 9rpx;
			}
			.dianname{
				max-width: 70%;
				display: inline-block;
				font-weight: bold;
				font-size: 28rpx;
				color: #272727;
			}
			.zt{
				font-weight: 500;
				font-size: 25rpx;
				color: #FF0050;
			}
		}
		.olist{
			display: flex;
			flex-direction: column;
			.onav{
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				.tu{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.navright{
					width: 73%;
					display: flex;
					flex-direction: column;
					.navone{
						display: flex;
						flex-direction: row;
						margin-bottom: 10rpx;
						.bt{
							max-width: 80%;
							display: inline-block;
							font-weight: 500;
							font-size: 26rpx;
							color: #222222;
						}
						.btmiao{
							max-width: 80%;
							display: inline-block;
							font-weight: 500;
							font-size: 20rpx;
							color: #BBBBBB;
						}
						.jia{
							font-weight: bold;
							font-size: 26rpx;
							color: #1A1A1A;
						}
						.zheng{
							padding: 4rpx 20rpx;
							border-radius: 6rpx;
							border: 1px solid #999999;
							font-weight: 500;
							font-size: 20rpx;
							color: #999999;
						}
					}
				}
			}
			.onav:last-child{
				margin-bottom: 0;
			}
			
		}
		.heview{
			display: flex;
			flex-direction: column;
			.hename{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin: 13rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
			}
			.btn{
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #767676;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				margin-left: 20rpx;
				min-width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.fukuan{
				background: #FF7C41;
				color: #fff;
				border: none;
			}
			.queren{
				background: #483C38;
				color: #fff;
				border: none;
			}
		}
	}
	.oitem:last-child{
		margin-bottom: 0;
	}
	.nodata{
		margin: 200rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.kzt_img_zwsj{
			width: 156rpx;
			height: 128rpx;

		}
		text{
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
			display: block;
			margin-top: 30rpx;
		}
	}
	.shengku{
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		display: block;
		margin-top: 8rpx;
	}
	.tablei{
		padding: 10rpx 90rpx 8rpx;
		display: flex;
		flex-direction: row;
		
		.leiitem{
			height: 68rpx;
			background: #F3F3F3;
			border-radius: 34rpx;
			display: flex;
			flex-direction: row;
			width: 100%;
			.tabitem{
				width: 50%;
				height: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #666666;
			}
			.tactive{
				background: #52443B;
				border-radius: 34rpx;
				color: #fff;
			}
		}
	}
	.menitem{
                display: flex;
                flex-direction: row;
                align-items: center;
                background: #FFFFFF;
                border-radius: 24rpx;
                padding: 25rpx;
                margin: 0 30rpx 20rpx;
                .tu{
                    width: 180rpx;
                    height: 180rpx;
                    margin-right: 20rpx;
                    border-radius: 20rpx;
                }
                .menone{
                    display: flex;
                    flex-direction: column;
                    width: 68%;
                    // height: 100%;
                    .menhead{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        .name{
                            font-weight: bold;
                            font-size: 32rpx;
                            color: #272727;
                        }
                        .yingye{
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #24B924;
                        }
                        .yingtime{
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #333333;
                            display: inline-block;
                            margin-left: 18rpx;
                        }
                        .icon_dw{
                            width:22rpx;
                            height: 24rpx;
                            margin-right: 8rpx;

                        }
                        .ju{
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #1A1A1A;
                        }
                        .juli{
                            margin-left: 30rpx;
                            font-weight: 500;
                            font-size: 24rpx;
                            color: #999999;
                            display: inline-block;
                            max-width: 70%;
                        }
						.tiview{
							margin-left: auto;
							width: 200rpx;
							height: 68rpx;
							background: #52443B;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 28rpx;
							color: #FFFFFF;
						}
                    }
                    .mennav{
                        margin-top: 35rpx;
                    }
                }
            }
        // }

		.hename{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin: 13rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
			}
			.btn{
				padding: 14rpx 25rpx;
				border-radius: 10rpx;
				border: 1rpx solid #767676;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				margin-left: 20rpx;
				min-width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.fukuan{
				background: #FF7C41;
				color: #fff;
				border: none;
			}
			.queren{
				background: #483C38;
				color: #fff;
				border: none;
			}

			.dinview{
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 0 20rpx 20rpx;
				padding: 30rpx;
				.dinitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 25rpx;
					.dinname{
						font-weight: bold;
						font-size: 24rpx;
						color: #808080;
					}
					.dinnright{
						margin-left: auto;
						display: flex;
						flex-direction: row;
						align-items: center;
						.drnval{
							font-weight: bold;
							font-size: 24rpx;
							color: #1A1A1A;
						}
						.fu{
							width: 70rpx;
							height: 36rpx;
							background: #F2F2F2;
							border-radius: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 22rpx;
							color: #333333;
							margin-left: 20rpx;
						}
					}
				}
				.xufu{
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					.fuprice{
						font-weight: 500;
						font-size: 26rpx;
						color: #272727;
					}
					.fupricenum{
						font-size: 35rpx;
					}
				}
				.dinitem:last-child{
					margin-bottom: 0;
				}
			}
			.dianpu{
				display: flex;
				flex-direction: column;
				background: #FFFFFF;
				border-radius: 30rpx;
				margin: 0 25rpx 25rpx;
				.dianone{
					display: flex;
					flex-direction: row;
					padding: 25rpx;
					border-bottom: 1rpx solid #eee;
					.tuimg{
						width: 130rpx;
						height: 130rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
					}
					.shopright{
						width: 77%;
						display: flex;
						flex-direction: row;
						align-items: center;
						.sleft{
							display: flex;
							flex-direction: column;
							width: 100%;
							height: 100%;
							.lone{
								display: flex;
								flex-direction: row;
								align-items: center;
								width: 100%;
								.lname{
									font-weight: 800;
									font-size: 30rpx;
									color: #111111;
									max-width: 80%;
									display: inline-block;
								}
								.icon_rz{
									margin-left: 9rpx;
									width: 28rpx;
									height: 28rpx;
								}
							}
							.tuan{
								display: flex;
								flex-direction: row;
								margin-top: auto;
								flex-wrap: wrap;
							}
							.tuang{
								padding: 2rpx 14rpx;
								background: rgba(254,42,0,0.1);
								border-radius: 5rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #FE2A00;
								margin-right: 15rpx;
								margin-bottom: 10rpx;
							}
						}
						.sright{
							flex: 1;
							margin-left: auto;
							.jindian{
								width: 120rpx;
								height: 50rpx;
								background: #FF7C41;
								border-radius: 16rpx 16rpx 16rpx 16rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-weight: bold;
								font-size: 28rpx;
								color: #FFFFFF;
							}
						}
					}
				}
				.diantwo{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 20rpx 20rpx;
					.icon_dw{
						width: 18rpx;
						height: 21rpx;
						margin-right: 8rpx;
					}
					.wentit{
						max-width: 60%;
						display: inline-block;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
					.icon_xgs{
						margin-left: auto;
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
			.tuanquan{
				border-top: 2rpx dotted #eee;
				padding: 20rpx 0 0;
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;
				.tquans{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 20rpx;
					.tuanone{
						font-weight: 500;
						font-size: 26rpx;
						color: #222222;
					}
					.tquannum{
						font-weight: bold;
						font-size: 26rpx;
						color: #FF7C41;
						display: inline-block;
						margin: 0 5rpx;
					}
					.chaquan{
						margin-left: auto;
						width: 140rpx;
						height: 58rpx;
						border-radius: 10rpx;
						border: 1px solid #483C38;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #483C38;
					}
					.tquanma{
						font-weight: bold;
						font-size: 26rpx;
						color: #222222;
					}
					.daishi{
						// margin-left: auto;
						font-weight: bold;
						font-size: 26rpx;
						color: #FF7C41;
					}
				}
				.tquans:last-child{
					margin-bottom: 0;
				}
			}
			.shiyong{
				display: flex;
				flex-direction: column;
				background: #FFFFFF;
				border-radius: 30rpx;
				margin: 0 25rpx 25rpx;
				padding: 30rpx;
				.xuzhi{
					font-weight: bold;
					font-size: 28rpx;
					color: #272727;
					display: block;
					margin-bottom: 30rpx;
				}
				.xuitem{
					display: flex;
					flex-direction: row;
					margin-bottom: 20rpx;
					.xuname{
						width: 120rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #808080;
						display: block;
						text-align: left;
					}
					.xuright{
						width: 80%;
						font-weight: bold;
						font-size: 24rpx;
						color: #1A1A1A;
					}
				}
				.xuitem:last-child{
					margin-bottom: 0;
				}
			}
			.popone{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx;
        // height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
    .kmiao{
        font-weight: 500;
        font-size: 28rpx;
        color: #111111;
        display: block;
        margin: 40rpx 0 20rpx;
    }
    .renxie{
        font-weight: 500;
        font-size: 28rpx;
        color: #FF8C39;
        display: block;
        margin-bottom: 50rpx;
    }
    .img_cg{
        width: 140rpx;
        height: 140rpx;
        margin-bottom: 15rpx;
    }
    .yikai{
        font-weight: bold;
        font-size: 36rpx;
        color: #111111;
    }
    .kaiti{
        background: #E9FFEB;
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 20rpx 0 15rpx;
        padding:20rpx 10rpx;
        .kaione{
            display: flex;
            flex-direction: row;
            align-items: center;
            .icON_bz{
                margin-right: 7rpx;
                width: 24rpx;
                height: 24rpx;
            }
            .jianame{
                font-weight: bold;
                font-size: 28rpx;
                color: #16B925;
            }
        }
        .youxiao{
            font-weight: 500;
            font-size: 20rpx;
            color: #16B925;
            display: block;
            margin-top: 10rpx;
        }
    }
	.queli{
        display: flex;
        flex-direction: column;
        border: 1rpx solid #333;
		padding:8rpx 20rpx;
		width: 100%;
		border-radius: 20rpx;
		margin: 40rpx 0;
        .queitem{
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            .icon_xz_s{
                margin-right: 15rpx;
                width: 36rpx;
                height: 36rpx;
            }
            text{
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
            }
        }
    }
</style>
